<template>
  <!-- #ifdef H5 -->
    <mtitles  title="选择门店" bgColor="#56BF7A" :delta='3' color="#fff" isBack></mtitles>
    <!-- #endif -->
	<view class="flex-direction flex">
		<map
			id="bgMap"
			:longitude="mapLongitude"
			:latitude="mapLatitude"
			show-location="true"
			:polyline="polyline"
			:scale="scale"
			:markers="covers"
		></map>
		<view class="storeBox">
			<!-- <view class="title flex">
				<view class="lftext">门店地址</view>
				<view class="flex-sub text-cut rtext">
					<text class="adico econweizhidingwei"></text>
					上次去过：{{ visitedName }}
				</view>
			</view> -->
			<view class="tit_search_box">
				<view class="cu-bar search bg-white">
					<view class="search-form round">
						<view class="cuIcon-search titsbtn"></view>
						<input @confirm="searchAction" v-model="searchKey" type="text" placeholder="请输入门店名称" confirm-type="search"></input>
					</view>
				</view>
				<!-- <view class="search_bot flex">
					<view class="flex-sub">
						<text class="acon-shoucang1 org seIco"></text>
						我常去的
					</view>
					<view class="flex-sub">
						<text class="acon-daohang1 seIco"></text>
						上次去的
					</view>
				</view> -->
			</view>
			<view v-if="searchKey!=''&&searchedKey&&addressStore.length==0" class="empty_box text-center flex flex-direction align-center justify-center">
				<view>
					没有搜索到此门店
				</view>
			</view>
			<scroll-view class="list-scroll-content padding-bottom-sm" id="shipSelf" scroll-y>
				<view class="shipping-self touch">
					<!-- 门店自提 -->
					<view class="scroll-item" v-for="(item, index) in addressStore" :key="index" :class="{ active: storeClass == index }" @tap="selectMd(item, index)">
						<view class="flex align-center item" :class="{'b_b':index<(addressStore.length-1)}">
							<view class="selc cuIcon-check" :class="{ selc: storeClass == index }"></view>
							<view class="flex-sub">
								<view class="flex justify-between">
									<view class="text-df text-bold">{{ item.vnick }} <text v-if="(item.ext&&!item.ext.isSubscribe)||!item.ext" class="text-sm text-c9 text-nomal">(暂未开通)</text></view>
									<view class="distance">距您{{ item.distance ? item.distance : '0' }}{{ item.distanceUnit ? item.distanceUnit : 'm' }}</view>
								</view>
								<view class="item-ms">
									<text class="cuIcon-time ico"></text>
									<text>{{ item.vstartTime ? item.vstartTime + '-' + item.vendTime : '营业时间未知' }}</text>
								</view>
								<view class="item-ms flex align-center">
									<view class="flex-sub itmlocal">
										<text class="cuIcon-location ico"></text>
										<text>{{ item.vaddress ? item.vaddress : '' }}</text>
									</view>
									<view class="toStoreBtn" @click.stop="gotoMap(item)">
										到这去
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="ship-btn flex text-center">
						<view class="flex-sub" @tap="toggleShipping()">取消</view>
						<view class="defin flex-sub" @tap="toggleShipping()">确定</view>
					</view>	 -->
				</view>
			</scroll-view>
		</view>
		<!-- <loading></loading> -->
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad ,onUnload,onHide} from '@dcloudio/uni-app';
	import { queryMemberLists } from '@/api/vmeitime-http/index.js'
	import { mnavTo, showLoading, hideLoading} from '@/utils/helper';
	import mapi from '@/utils/mapi';
	import { useShopStore } from '@/stores/shopStore';
	const shopStore = useShopStore()
	const latitude=ref(28.208399)
	const longitude=ref(113.06463)
	const mapLatitude=ref(28.208399)
	const mapLongitude=ref(113.06463)
	const covers=ref([
		// {
			// id: 1,
			// longitude: 113.06463,
			// latitude: 28.208399,
			// iconPath: '../../../static/location_shop.png', //257*200
			// width: 26,
			// height: 20,
			// title: '颐而康'
	
			// latitude: 28.2, //纬度
			// longitude: 113.038, //经度
			// iconPath: '../../static/good_ico2.png', //显示的图标
			// title: '标注点名', //标注点名，未设置气泡窗口则 点击有效
			//为标记点旁边增加标签
			// label: {
			// 	content: '标记内容', //文本
			// 	color: '#F76350', //文本颜色
			// 	anchorX: -50, //label的坐标，原点是 marker 对应的经纬度
			// 	anchorY: -30, //label的坐标，原点是 marker 对应的经纬度
			// 	// x:39.909,//这个组件微信在1.2.0以后就废弃了
			// 	// y:116.39742,
			// 	bgColor: '#00000000', //背景色
			// 	padding: 1, //文本边缘留白
			// 	borderWidth: 1, //边框宽度
			// 	borderRadius: 4,
			// 	borderColor: '#D84C29', //边框颜色
			// 	textAlign: 'center' //文本对齐方式。
			// },
			//自定义标记点上方的气泡窗口 点击有效
			// callout: {
			// 	content: '地点1',
			// 	color: '#F76350',
			// 	fontSize: 10,
			// 	borderRadius: 5
			// }
			//经纬度在标注图标的锚点，默认底边中点
			// anchor:{
			// 	 x:5,
			// 	 y:1,
			//  }
		// }
	])
	const scale=ref(14) //地图层级，取值范围为5-18，默认16，14最优，11看长沙市
	//在地图上显示控件，控件不随着地图移动
	// controls: [
	// 	{
	// 		id: 1, //控件id
	// 		iconPath: '../../../static/led_yuan.png', //显示的图标
	// 		position: {
	// 			//控件在地图的位置
	// 			left: 15,
	// 			top: 15,
	// 			width: 20,
	// 			height: 20,
	// 			bgColor: '#F76350'
	// 		}
	// 	}
	// ],
	//在地图上显示圆
	// circles: [
			// {
			// 	latitude: 28.22,
			// 	longitude: 113.95,
			// 	fillColor: '#FFC41F', //填充颜色
			// 	color: '#12A1DD', //描边的颜色
			// 	radius: 200, //半径
			// 	strokeWidth: 2 //描边的宽度
			// }
	// ],
	//指定一系列坐标点，从数组第一项连线至最后一项
	const polyline=ref([
		// {
		// 	points: [
		// 		{
		// 			latitude: 28.19,
		// 			longitude: 112.3
		// 		},
		// 		{
		// 			latitude: 28.9,
		// 			longitude: 112.99
		// 		}
		// 	],
		// 	color: '#0000AA', //线的颜色
		// 	width: 2, //线的宽度
		// 	dottedLine: true, //是否虚线
		// 	arrowLine: true //带箭头的线 开发者工具暂不支持该属性
		// }
	])
	const searchKey=ref('')
	const searchedKey=ref('')
	const addressStore=ref([])
	const pageLoaded=ref(false)
	const orcityCode=ref('')
	const needChangeGlobeShop=ref('')
	const stime_out=ref(null)
	const curSellId=ref('')
	const storeClass=ref(null)
	const source=ref('')
	onLoad((options)=>{
		orcityCode.value = options.cityCode||'';
		needChangeGlobeShop.value = options.needChange||'1'//暂
		curSellId.value = options.curSellId||'';
		stime_out.value?clearTimeout(stime_out.value):'';
		source.value = options.source||'';
		loadData()
	})
	const searchAction=()=>{
		if(searchKey.value=='' || searchedKey.value!=searchKey.value){
		   queryMemberList('search');
		}
	}
	const loadData=()=>{
		var isNneedGps = new Date().getTime() - uni.getStorageSync('locationTime') < 60 * 2 * 1000; //2分钟内不定位
		if (!uni.getSystemInfoSync().locationEnabled) {
			console.log('未打开系统GPS开关');
			queryMemberList();
			return;
		}
		showLoading({
			mask: true,
			title: '正在定位...'
		})
		let oldPosition = uni.getStorageSync('oldLongitudeLatitude');
		if(isNneedGps&&oldPosition){
			longitude.value = oldPosition.split(',')[0] || 0;
			latitude.value = oldPosition.split(',')[1] || 0;
			mapLongitude.value = longitude.value
			mapLatitude.value =latitude.value
			hideLoading();
			queryMemberList();
			return;
		}else{
			uni.getLocation({
				//获取当前的位置坐标
				type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标
				success: function(res) {
					hideLoading();
					console.log('定位获取经纬度', res);
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
						longitude.value = res.longitude;
						latitude.value = res.latitude;
						mapLongitude.value = longitude.value
						mapLatitude.value = latitude.value
						queryMemberList();
				},
				fail: function(err) {
					hideLoading();
					console.log('定位失败', err);
					queryMemberList();
				}
			});
		}
	}
	const queryMemberList=async(source:any='')=>{
		console.log("kkk")
		let isSearch = searchKey.value != "";
		showLoading({
			mask: true,
			title: '正在' + (isSearch?'搜索...':'加载...')
		})
		var paramData:any = {
			longitude: longitude.value || '116.38',//定位失败给天安门的经纬度
			latitude: latitude.value || '39.90',
			vtype_two_category: 0,
			vtype: '835',
			nmember_id: '',//that.userInfo.memberId
			curPage: 1,
			pageSize: 200
		};
		if (isSearch) {
			paramData.vnick = searchKey.value;
		}
		try{
			let res:any=await queryMemberLists(paramData)
			if (!res.result) {
				// that.$hideLoading();
				hideLoading();
				uni.showToast({
					mask: true,
					title: '获取门店失败！', //超过7个字符显示不全
					icon: 'none'
				});
				return;
			}
			let array = [],cover = [];
			for (let key in res.object) {
				// console.log(key, res.object[key]);
				let dist = latitude.value?key.split('.')[0]:'';
				res.object[key]['distanceUnit'] = dist.length > 3 ? 'km' : 'm';
				dist = dist.length > 3 ? (Number(dist)/1000).toFixed(2) : dist;
				res.object[key]['distance'] = dist;
				array.push(res.object[key]);
				cover.push({
					// id: 'cover_'+(array.length - 1),
					id: array.length - 1,
					longitude: Number(res.object[key].vgps.split(',')[0]),
					latitude: Number(res.object[key].vgps.split(',')[1]),
					iconPath: '../../../static/location_shop.png', //257*200
					width: 26,
					height: 20,
					title: res.object[key].vnick
				});
			}
			addressStore.value = array;
			covers.value = cover;
			if (source=='search') {
				// that.searchedKey = that.searchKey
				let gpsArr = addressStore.value.length >= 1 ? addressStore.value[0].vgps.split(',') : [];
				if (gpsArr.length >= 1) {
					mapLatitude.value = gpsArr[1];
					mapLongitude.value = gpsArr[0];
				}
				// console.log('that.latitude-that.longitude',that.latitude,that.longitude)
			}
			// source=='search'?that.searchedKey = that.searchKey:'';
			hideLoading();
		}catch(e){
      hideLoading();
      uni.showToast({
      	mask: true,
      	title: '获取门店失败！', //超过7个字符显示不全
      	icon: 'none'
      });
		}

	}
	const selectMd=(item:any,index:any)=> {
		if((item.ext&&!item.ext.isSubscribe)||!item.ext){
			mapi.msg('该门店暂未开通预约服务')
			return
		}
		storeClass.value = index;
		if(source.value){
			source.value=='recharge'?shopStore.setRechargeShop(item):shopStore.setShop(item);
			source.value === 'checkstore' && uni.setStorageSync('checkedDoor', true);
			source.value!='recharge'&&shopStore.setSlecShopType('hand')
			uni.navigateBack()
		}
	}
	const gotoMap=(item:any)=> {
		uni.openLocation({
			longitude: Number(item.vgps.split(',')[0]),
			latitude: Number(item.vgps.split(',')[1]),
			scale: 17, //5-18，默认18
			name: item.vnick,
			address: item.vaddress
		});
	}
	onHide(()=>{
		hideLoading();
	})
	onUnload(()=>{
		pageLoaded.value = false;
		hideLoading();
	})
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}
.tit_search_box{
	position: absolute;
	z-index: 109;
	left: 20rpx;
	background: #fff;
	top: -120rpx;//-166
	width: calc(100% - 40rpx);
	height: 150rpx;//200
	border-radius: 16rpx;
	box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
	.search{
		border-radius: 16rpx;
	}
	.search-form {
		margin-top: 30rpx;
		height: 80rpx;
		border: 1px solid #56BF7A;
		box-sizing: border-box;
		box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
	}
	.cuIcon-search.titsbtn{
		padding: 0 24rpx 0 36rpx;
		margin: 0;
		font-size: 34rpx;
		color: #56BF7A;
	}
	.search_bot{
		color: #666;
		margin-top: 30rpx;
		// line-height: 60rpx;
		text-align: center;
	}
	.seIco{
		margin-right: 20rpx;
		color: #56BF7A;
		font-size: 30rpx;
		&.org{
			color: #FEB448;
		}
	}
}
.titleSearchBox {
	// position: fixed;
	// z-index: 10;
	width: 100%;
	background: #fff;
	padding: 26rpx 34rpx 20rpx 34rpx;
	.input-box {
		height: 60rpx;
		border-radius: 10rpx;
		background: #ededed;
		position: relative;
		input {
			font-size: 24rpx;
			padding-left: 36rpx;
		}
		.cuIcon-search {
			width: 64rpx;
			text-align: center;
			color: #666;
		}
	}
}
.map {
	width: 100%;
	height: 40vh;
	background: #2cad8d;
}

#bgMap {
	width: 100%;
	height: 40vh;
}

.storeBox {
	width: 100%;
	height: 60vh;
	position: relative;
	background: #fafafa;
	padding: 60rpx 20rpx 20rpx 20rpx;
	.empty_box{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		color: #999;
	}
	.title {
		font-weight: 500;
		font-size: 24rpx;
		padding-left: 33rpx;
		line-height: 80rpx;
		background: #f6f6f6;
	}
	.lftext {
		min-width: 100rpx;
	}
	.rtext {
		color: #666;
		padding-right: 34rpx;
		text-align: right;
	}
	.adico {
		display: inline-block;
	}
}

#shipSelf {
	width: 100%;
	background: #fff;
	height: 100%;
	border-radius: 16rpx;
	box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
}

.shipping-self {
	// height: 100vh;
	// padding-bottom:88rpx;
	.ship-btn {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #f6f6f6;
		font-size: 28rpx;
		height: 88rpx;
		line-height: 88rpx;
		z-index: 99;

		.defin {
			color: #fff;
			background: linear-gradient(90deg, rgba(40, 176, 91, 1) 0%, rgba(70, 183, 155, 1) 100%);
		}
	}

	.scroll-item {
		// &:nth-last-child(1) {
		// }
		padding: 0 30rpx;

		.selc {
			display: none;
		}

		&.active {
			padding-left: 0;
			// background:#D5F4ED;
			background: #f0f0f0;

			.selc {
				display: inline-block;
				// padding-right: 30rpx;
				width: 82rpx;
				font-weight: bold;
				text-align: center;
				font-size: 32rpx;
				color: #2cad8d;
			}
		}
	}
	.item {
		padding: 40rpx 0;

		.distance {
			color: #999;
			font-size: 22rpx;
		}
		.itmlocal{
			width: 0;
			padding-right: 50rpx;
		}
		.toStoreBtn{
			color: #56BF7A;
			
		}
		.item-ms {
			color: #666;
			font-size: 24rpx;
			margin-top: 20rpx;

			.ico {
				margin-right: 12rpx;
			}
		}
	}
}
</style>